react-linear-feedback 0.1.0 → 0.2.0

package/README.md

@@ -1,31 +1,40 @@
 # react-linear-feedback
 
-A drop-in feedback widget for any React app. A trusted user opens it with `?feedback`, **drags a box** over the page, picks **Bug / Improvement**, writes a note — and it captures an **annotated screenshot** and opens a **Linear issue**.
+[![npm version](https://img.shields.io/npm/v/react-linear-feedback.svg)](https://www.npmjs.com/package/react-linear-feedback) [![license](https://img.shields.io/npm/l/react-linear-feedback.svg)](./LICENSE)
 
-- 🪶 **Framework-agnostic** — Next.js, Vite, Remix, CRA… (no `next` dependency)
-- 🎨 **Self-contained styles** — injected at runtime, themeable with one prop; **no CSS import, no Tailwind, no design system** required
+**A drop-in React feedback widget that turns a drawn box + note into a Linear issue with an annotated screenshot.**
+
+A trusted user opens it with `?feedback`, **drags a box** over the page, picks a type (**Bug / Improvement**), writes a note — and it captures a screenshot and files a Linear issue. Framework-agnostic, self-contained styling, no design system required.
+
+<!-- Demo: record a short GIF and drop it here → ![demo](docs/demo.gif) -->
+> _Draw a box anywhere → type a note → it lands in Linear with the annotated screenshot and page context._
+
+- 🪶 **Themeable in one prop** — no CSS import, no Tailwind, no design system; styles are injected at runtime
+- 🌍 **Works in any React app** — Next.js, Vite, Remix, CRA… (no `next` dependency; `"use client"` is built in)
 - 🖼️ **Annotated screenshots** via [`modern-screenshot`](https://github.com/qq15725/modern-screenshot) (handles Tailwind v4 / `oklch()`)
-- 🏷️ **Labels resolved by name** at request time (recoloring/recreating a label in Linear won't break it), applied best-effort
-- 🔌 Tiny server core + **Next.js & Node/Express adapters**
+- 🏷️ **Labels by name, self-healing** — resolved at request time, so recoloring/recreating a label in Linear won't break it; applied best-effort
+- 🔌 **Tiny server core** + Next.js, Node/Express, and Vite-dev adapters
+
+## Contents
+
+- [Install](#install) · [Quick start (Next.js)](#quick-start-nextjs) · [Vite / any backend](#use-with-vite--any-react-app) · [Linear setup](#linear-setup) · [Configuration](#configuration) · [Theming](#theming) · [Custom types](#custom-types) · [Security](#security) · [Troubleshooting](#troubleshooting) · [License](#license)
 
 ## Install
 
 ```bash
 npm i react-linear-feedback
-# the server entry needs the Linear SDK:
-npm i @linear/sdk
 ```
 
-`react` / `react-dom` are peer dependencies. `@linear/sdk` is an optional peer — only needed where you run the server handler.
+`react` / `react-dom` are peer dependencies. `@linear/sdk` ships as a dependency — it's imported only by the server entry, so it's tree-shaken out of client bundles. Do [Linear setup](#linear-setup) first to get your API key, team, and labels.
 
-## Quick start — Next.js (App Router)
+## Quick start (Next.js, App Router)
 
 **1. Server route** — `app/api/feedback/route.ts`:
 
 ```ts
 import { createNextRoute, cookieGate } from "react-linear-feedback/server";
 
-export const runtime = "nodejs"; // needs Buffer + the Linear SDK
+export const runtime = "nodejs"; // REQUIRED — uses Buffer to process the screenshot; Edge is not supported
 
 export const POST = createNextRoute({
   apiKey: process.env.LINEAR_API_KEY!,
@@ -34,7 +43,7 @@ export const POST = createNextRoute({
 });
 ```
 
-**2. Mount the widget** once (e.g. in `app/layout.tsx`):
+**2. Mount the widget once** (e.g. in `app/layout.tsx`):
 
 ```tsx
 import { FeedbackGate } from "react-linear-feedback/react";
@@ -49,62 +58,138 @@ export default function RootLayout({ children }) {
 }
 ```
 
-Visit any page with `?feedback` to turn it on (a cookie remembers it). `?feedback=0` turns it off.
+No `"use client"` needed — the package ships it, so you can mount `<FeedbackGate>` straight from a Server Component layout.
+
+**3. Turn it on.** The widget is **hidden by default**. Visit any page with **`?feedback`** (or `?feedback=1`) to enable it; a cookie remembers the choice for 90 days. `?feedback=0` turns it off.
 
-## Quick start — Vite / SPA (separate backend)
+## Use with Vite / any React app
 
-Mount the widget and point it at your backend:
+Unlike Next.js, a Vite SPA has **no server of its own** — so the handler runs as a serverless function (e.g. on Vercel) in production, and as a dev-server plugin locally. Same widget either way.
+
+**1. Mount the widget** once, in your root component:
 
 ```tsx
 import { FeedbackGate } from "react-linear-feedback/react";
 
-<FeedbackGate endpoint="https://api.example.com/feedback" brandColor="#7f56d9" />
+<FeedbackGate brandColor="#7f56d9" />; // endpoint defaults to /api/feedback (same origin)
+```
+
+**2. Production — a Vercel serverless function** at `api/feedback.ts`:
+
+```ts
+import { createNodeHandler, cookieGate } from "react-linear-feedback/server";
+
+// Node runtime (the default for /api functions) — Edge has no Buffer for the screenshot upload.
+export default createNodeHandler({
+  apiKey: process.env.LINEAR_API_KEY!,
+  teamId: process.env.LINEAR_TEAM_ID!,
+  authorize: cookieGate("wh_feedback"),
+});
+```
+
+Set `LINEAR_API_KEY` / `LINEAR_TEAM_ID` in your Vercel project's env (server-side — **not** `VITE_`-prefixed, so they never reach the bundle). The function is same-origin as the SPA, so no CORS needed.
+
+**3. Local dev — the Vite plugin**, so `vite dev` serves the same endpoint (without it, `POST /api/feedback` 404s locally):
+
+```ts
+// vite.config.ts
+import { defineConfig, loadEnv } from "vite";
+import { linearFeedback } from "react-linear-feedback/vite";
+import { cookieGate } from "react-linear-feedback/server";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), ""); // reads .env (LINEAR_* are server-side, un-prefixed)
+  return {
+    plugins: [
+      linearFeedback({
+        apiKey: env.LINEAR_API_KEY,
+        teamId: env.LINEAR_TEAM_ID,
+        authorize: cookieGate("wh_feedback"),
+      }),
+    ],
+  };
+});
 ```
 
-Run the handler on any Node server (Express shown):
+The plugin is dev-only (`apply: "serve"`) — it has no effect on the production build.
+
+### Other Node servers (Express, Hono, …)
+
+`createNodeHandler` is a plain `(req, res)` handler that reads the raw body itself (works with or without `express.json()`):
 
 ```ts
 import express from "express";
-import { createNodeHandler } from "react-linear-feedback/server";
+import { createNodeHandler, cookieGate } from "react-linear-feedback/server";
 
 const app = express();
-app.post("/feedback", createNodeHandler({
+app.post("/api/feedback", createNodeHandler({
   apiKey: process.env.LINEAR_API_KEY!,
   teamId: process.env.LINEAR_TEAM_ID!,
+  authorize: cookieGate("wh_feedback"),
 }));
 app.listen(8787);
 ```
 
-(Enable CORS for your site origin if the API is on a different host.)
+If the SPA and API are on **different origins**, set `allowedOrigin: "https://your-site.com"` and enable CORS (`credentials: true` so the cookie is sent).
+
+## Linear setup
+
+You need three things from Linear:
+
+1. **API key** — Linear → **Settings → Security & access → Personal API keys** → create one. Keep it server-side as `LINEAR_API_KEY`.
+2. **Team UUID** — the team issues land in. Find it via the Linear API (`viewer`/`teams` query) or your team settings; set it as `LINEAR_TEAM_ID`.
+3. **Labels** — each feedback type is matched to a Linear label **by name** (case-insensitive). With the defaults, make sure labels named **`bug`** and **`improvement`** exist in that team (or workspace). Missing labels don't fail the issue — it's just created without one. Remap names with the server [`labels`](#configuration) option.
+
+```bash
+# .env.local
+LINEAR_API_KEY=lin_api_...
+LINEAR_TEAM_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+```
 
 ## Configuration
 
-**`<FeedbackGate>` / `<FeedbackWidget>` props**
+### Widget props (`<FeedbackGate>` / `<FeedbackWidget>`)
+
+Most apps only set `brandColor` and maybe `endpoint`.
 
 | Prop | Default | Description |
 | --- | --- | --- |
 | `endpoint` | `/api/feedback` | Where the widget POSTs |
-| `brandColor` | indigo | FAB / active / focus color (sets `--lfb-brand`) |
+| `brandColor` | `#6366f1` | FAB / active / focus color (sets the `--lfb-brand` CSS var) |
 | `position` | `bottom-right` | `bottom-right` \| `bottom-left` \| `top-right` \| `top-left` |
 | `types` | Bug, Improvement | `{ id, label, color, icon? }[]` shown in the composer |
-| `nameRequired` | `true` | Ask for a reporter name before the first submission |
+| `nameRequired` | `true` | Ask for a reporter name before the first submission (saved to localStorage, included in the issue) |
+| `nameStorageKey` | `wh_feedback_name` | localStorage key for the remembered name |
 | `fabLabel` | `Give feedback` | Floating button text |
-| `urlParam` | `feedback` | Toggle param (gate only) |
-| `cookieName` | `wh_feedback` | Enabled-state cookie (gate only) |
+| `urlParam` ¹ | `feedback` | Toggle param |
+| `cookieName` ¹ | `wh_feedback` | Enabled-state cookie name |
+| `cookieValue` ¹ | `1` | Cookie value when enabled |
+| `cookieMaxAgeSeconds` ¹ | `7776000` (90d) | Cookie lifetime |
 
-**Server config** (`createNextRoute` / `createNodeHandler` / `createFeedbackIssue`)
+¹ `<FeedbackGate>` only.
+
+### Server config (`createNextRoute` / `createNodeHandler` / `createFeedbackIssue`)
 
 | Field | Description |
 | --- | --- |
 | `apiKey` | Linear personal API key (**server-side only**) |
 | `teamId` | Target team UUID |
-| `labels` | Optional `{ [typeId]: labelName }` map. Default: the type id is the label name (so `bug` → label `bug`) |
-| `allowedOrigin` | Optional single-origin allowlist |
-| `authorize(req)` | Optional gate; return `false` to reject (`cookieGate` provided) |
+| `labels` | Optional `{ [typeId]: labelName }` map. Default: the type id **is** the label name (so type `bug` → label `bug`) |
+| `allowedOrigin` | Optional single-origin allowlist (adapters) |
+| `authorize(req)` | Optional gate; return `false` to reject. `cookieGate(name, value="1")` is provided |
+
+Remap type ids to differently-named Linear labels:
+
+```ts
+createNextRoute({
+  apiKey, teamId,
+  labels: { bug: "bug", idea: "feature-request" },
+});
+```
 
 ## Theming
 
-Set `brandColor`, or override any CSS variable on `.lfb-doc-layer, .lfb-fixed-layer`:
+Set `brandColor`, or override any CSS variable on `.lfb-root`:
 `--lfb-brand`, `--lfb-fg`, `--lfb-surface`, `--lfb-border`, `--lfb-radius`, `--lfb-rect`, `--lfb-z`, `--lfb-font`.
 
 ## Custom types
@@ -118,14 +203,32 @@ Set `brandColor`, or override any CSS variable on `.lfb-doc-layer, .lfb-fixed-la
 />
 ```
 
-Each `type.id` is matched to a Linear label of the same name (or remap via the server `labels` config).
+Each `type.id` is matched to a Linear label of the same name. If your label is named differently, map it on the server via `labels` (above). Built-in `icon` values: `"bug"`, `"improvement"`, `"dot"`.
 
 ## Security
 
-The endpoint **creates Linear issues**, so it's effectively write access to your tracker. It's gated only by what you wire up — use `authorize` (e.g. `cookieGate`, a session check) and/or `allowedOrigin`, and add rate limiting if the page is public. Your `LINEAR_API_KEY` stays server-side; the package never ships it to the browser.
+⚠️ **The endpoint creates Linear issues**, so it's effectively write access to your tracker, and it's **open by default**. Before shipping on a public page:
+
+- **Gate it** with `authorize` (e.g. `cookieGate`, or your own session check).
+- **Restrict origin** with `allowedOrigin: "https://your-site.com"`.
+- **Rate-limit** if the page is public (e.g. per-IP).
 
-> Linear asset URLs (the screenshots) are **private** — they render inside the issue but a fresh signed URL is needed to fetch them elsewhere.
+Your `LINEAR_API_KEY` stays server-side; the package never ships it to the browser. Screenshots are uploaded to Linear's **private** asset storage — they render inside the issue, but the URL needs a fresh signed token to fetch elsewhere (it can't be hot-linked). If a screenshot upload fails, the issue is still created without it.
+
+## Troubleshooting
+
+Submissions never throw in the UI — failures are logged to the browser console with a `[feedback]` prefix, and server errors return a JSON `message`. If issues aren't being created, check:
+
+- `endpoint` points at your route, and `LINEAR_API_KEY` / `LINEAR_TEAM_ID` are set.
+- **CORS** is configured when the app and API are on different origins.
+- `runtime = "nodejs"` is set on the Next.js route (Edge has no `Buffer`).
+- On a **Vite SPA**, `POST /api/feedback` 404s under `vite dev` unless you add the [`linearFeedback` Vite plugin](#use-with-vite--any-react-app) (or run `vercel dev`). In production it's served by your deployed function.
+- The expected Linear **labels exist** (otherwise the issue is created without a label, with a warning).
 
 ## License
 
-MIT
+MIT — see [LICENSE](./LICENSE).
+
+## Contributing
+
+Issues and PRs welcome at [github.com/oliverodgaardwastehero/react-linear-feedback](https://github.com/oliverodgaardwastehero/react-linear-feedback).

package/dist/react/index.cjs

@@ -169,7 +169,13 @@ var TYPE_ICONS = {
 // src/react/styles.ts
 var STYLE_ID = "lfb-styles";
 var CSS2 = `
-.lfb-doc-layer, .lfb-fixed-layer {
+/*
+ * Defaults live on .lfb-root (the element that also receives the inline brandColor
+ * override) \u2014 NOT on the layers. The layers/FAB inherit from here. If the defaults
+ * sat on .lfb-doc-layer/.lfb-fixed-layer, a direct rule on those elements would beat
+ * the brandColor inherited from .lfb-root, so the \`brandColor\` prop would never apply.
+ */
+.lfb-root {
   --lfb-brand: #6366f1;
   --lfb-fg: #181d27;
   --lfb-fg-secondary: #414651;
@@ -250,12 +256,24 @@ var CSS2 = `
 .lfb-stack--bottom-left { right: auto; left: 16px; align-items: flex-start; }
 .lfb-stack--top-right { bottom: auto; top: 16px; }
 .lfb-stack--top-left { bottom: auto; top: 16px; right: auto; left: 16px; align-items: flex-start; }
+/* Edge tabs: anchored flush to a side, vertically centered. */
+.lfb-stack--right { top: 50%; bottom: auto; right: 0; transform: translateY(-50%); align-items: flex-end; }
+.lfb-stack--left { top: 50%; bottom: auto; left: 0; right: auto; transform: translateY(-50%); align-items: flex-start; }
+/* Keep the transient name-prompt / sent-toast cards off the viewport edge (the tab stays flush). */
+.lfb-stack--right > .lfb-card { margin-right: 12px; }
+.lfb-stack--left > .lfb-card { margin-left: 12px; }
 
 .lfb-fab { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 9999px; padding: 12px 16px; font-size: 14px; font-weight: 600; font-family: var(--lfb-font); cursor: pointer; background: var(--lfb-brand); color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.18); transition: transform 0.1s, background 0.1s; }
 .lfb-fab:hover { transform: scale(1.05); background: color-mix(in srgb, var(--lfb-brand) 88%, black); }
 .lfb-fab--active { background: var(--lfb-surface); color: var(--lfb-fg); border: 1px solid var(--lfb-border); }
 .lfb-fab--active:hover { background: var(--lfb-surface-hover); }
 
+/* Edge-tab launcher: compact, icon-only, rounded on the inner side only, flush to the viewport edge. */
+.lfb-fab--tab { gap: 0; padding: 14px 12px; border-radius: 12px 0 0 12px; box-shadow: -6px 0 20px rgba(0,0,0,0.18); }
+.lfb-fab--tab:hover { transform: translateX(-2px); }
+.lfb-stack--left .lfb-fab--tab { border-radius: 0 12px 12px 0; box-shadow: 6px 0 20px rgba(0,0,0,0.18); }
+.lfb-stack--left .lfb-fab--tab:hover { transform: translateX(2px); }
+
 .lfb-toast { display: flex; align-items: flex-start; gap: 10px; width: 300px; max-width: calc(100vw - 32px); }
 .lfb-toast-icon { color: #17b26a; flex-shrink: 0; margin-top: 1px; }
 .lfb-toast-body { min-width: 0; flex: 1; }
@@ -287,6 +305,7 @@ function FeedbackWidget({
   nameStorageKey = "wh_feedback_name",
   fabLabel = "Give feedback"
 }) {
+  const isEdge = position === "right" || position === "left";
   const [mode, setMode] = react.useState({ kind: "idle" });
   const [name, setName] = react.useState("");
   const [nameDraft, setNameDraft] = react.useState("");
@@ -563,21 +582,18 @@ function FeedbackWidget({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lfb-iconbtn", "aria-label": "Dismiss", onClick: () => setResult(null), children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
-            className: `lfb-fab${mode.kind === "idle" ? "" : " lfb-fab--active"}`,
+            className: `lfb-fab${isEdge ? " lfb-fab--tab" : ""}${mode.kind === "idle" ? "" : " lfb-fab--active"}`,
             "aria-label": mode.kind === "idle" ? fabLabel : "Cancel feedback",
+            title: isEdge ? mode.kind === "idle" ? fabLabel : "Cancel feedback" : void 0,
             onClick: startFlow,
-            children: mode.kind === "idle" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, { size: 18 }),
-              " ",
-              fabLabel
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(XIcon, { size: 18 }),
-              " Cancel"
-            ] })
+            children: [
+              mode.kind === "idle" ? /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, { size: isEdge ? 22 : 18 }) : /* @__PURE__ */ jsxRuntime.jsx(XIcon, { size: isEdge ? 22 : 18 }),
+              !isEdge && /* @__PURE__ */ jsxRuntime.jsx("span", { children: mode.kind === "idle" ? fabLabel : "Cancel" })
+            ]
           }
         )
       ] })

package/dist/react/index.d.cts

@@ -66,7 +66,9 @@ type FeedbackResult = {
 };
 
 declare const DEFAULT_TYPES: FeedbackTypeOption[];
-type FeedbackPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type FeedbackPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left"
+/** Edge tabs: compact, icon-only launcher flush to the side, vertically centered. */
+ | "right" | "left";
 type FeedbackWidgetProps = {
     /** Endpoint that runs the server handler (default "/api/feedback"). */
     endpoint?: string;

package/dist/react/index.d.ts

@@ -66,7 +66,9 @@ type FeedbackResult = {
 };
 
 declare const DEFAULT_TYPES: FeedbackTypeOption[];
-type FeedbackPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type FeedbackPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left"
+/** Edge tabs: compact, icon-only launcher flush to the side, vertically centered. */
+ | "right" | "left";
 type FeedbackWidgetProps = {
     /** Endpoint that runs the server handler (default "/api/feedback"). */
     endpoint?: string;

package/dist/react/index.js

@@ -167,7 +167,13 @@ var TYPE_ICONS = {
 // src/react/styles.ts
 var STYLE_ID = "lfb-styles";
 var CSS2 = `
-.lfb-doc-layer, .lfb-fixed-layer {
+/*
+ * Defaults live on .lfb-root (the element that also receives the inline brandColor
+ * override) \u2014 NOT on the layers. The layers/FAB inherit from here. If the defaults
+ * sat on .lfb-doc-layer/.lfb-fixed-layer, a direct rule on those elements would beat
+ * the brandColor inherited from .lfb-root, so the \`brandColor\` prop would never apply.
+ */
+.lfb-root {
   --lfb-brand: #6366f1;
   --lfb-fg: #181d27;
   --lfb-fg-secondary: #414651;
@@ -248,12 +254,24 @@ var CSS2 = `
 .lfb-stack--bottom-left { right: auto; left: 16px; align-items: flex-start; }
 .lfb-stack--top-right { bottom: auto; top: 16px; }
 .lfb-stack--top-left { bottom: auto; top: 16px; right: auto; left: 16px; align-items: flex-start; }
+/* Edge tabs: anchored flush to a side, vertically centered. */
+.lfb-stack--right { top: 50%; bottom: auto; right: 0; transform: translateY(-50%); align-items: flex-end; }
+.lfb-stack--left { top: 50%; bottom: auto; left: 0; right: auto; transform: translateY(-50%); align-items: flex-start; }
+/* Keep the transient name-prompt / sent-toast cards off the viewport edge (the tab stays flush). */
+.lfb-stack--right > .lfb-card { margin-right: 12px; }
+.lfb-stack--left > .lfb-card { margin-left: 12px; }
 
 .lfb-fab { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 9999px; padding: 12px 16px; font-size: 14px; font-weight: 600; font-family: var(--lfb-font); cursor: pointer; background: var(--lfb-brand); color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.18); transition: transform 0.1s, background 0.1s; }
 .lfb-fab:hover { transform: scale(1.05); background: color-mix(in srgb, var(--lfb-brand) 88%, black); }
 .lfb-fab--active { background: var(--lfb-surface); color: var(--lfb-fg); border: 1px solid var(--lfb-border); }
 .lfb-fab--active:hover { background: var(--lfb-surface-hover); }
 
+/* Edge-tab launcher: compact, icon-only, rounded on the inner side only, flush to the viewport edge. */
+.lfb-fab--tab { gap: 0; padding: 14px 12px; border-radius: 12px 0 0 12px; box-shadow: -6px 0 20px rgba(0,0,0,0.18); }
+.lfb-fab--tab:hover { transform: translateX(-2px); }
+.lfb-stack--left .lfb-fab--tab { border-radius: 0 12px 12px 0; box-shadow: 6px 0 20px rgba(0,0,0,0.18); }
+.lfb-stack--left .lfb-fab--tab:hover { transform: translateX(2px); }
+
 .lfb-toast { display: flex; align-items: flex-start; gap: 10px; width: 300px; max-width: calc(100vw - 32px); }
 .lfb-toast-icon { color: #17b26a; flex-shrink: 0; margin-top: 1px; }
 .lfb-toast-body { min-width: 0; flex: 1; }
@@ -285,6 +303,7 @@ function FeedbackWidget({
   nameStorageKey = "wh_feedback_name",
   fabLabel = "Give feedback"
 }) {
+  const isEdge = position === "right" || position === "left";
   const [mode, setMode] = useState({ kind: "idle" });
   const [name, setName] = useState("");
   const [nameDraft, setNameDraft] = useState("");
@@ -561,21 +580,18 @@ function FeedbackWidget({
           ] }),
           /* @__PURE__ */ jsx("button", { type: "button", className: "lfb-iconbtn", "aria-label": "Dismiss", onClick: () => setResult(null), children: /* @__PURE__ */ jsx(XIcon, {}) })
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            className: `lfb-fab${mode.kind === "idle" ? "" : " lfb-fab--active"}`,
+            className: `lfb-fab${isEdge ? " lfb-fab--tab" : ""}${mode.kind === "idle" ? "" : " lfb-fab--active"}`,
             "aria-label": mode.kind === "idle" ? fabLabel : "Cancel feedback",
+            title: isEdge ? mode.kind === "idle" ? fabLabel : "Cancel feedback" : void 0,
             onClick: startFlow,
-            children: mode.kind === "idle" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(MessageIcon, { size: 18 }),
-              " ",
-              fabLabel
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(XIcon, { size: 18 }),
-              " Cancel"
-            ] })
+            children: [
+              mode.kind === "idle" ? /* @__PURE__ */ jsx(MessageIcon, { size: isEdge ? 22 : 18 }) : /* @__PURE__ */ jsx(XIcon, { size: isEdge ? 22 : 18 }),
+              !isEdge && /* @__PURE__ */ jsx("span", { children: mode.kind === "idle" ? fabLabel : "Cancel" })
+            ]
           }
         )
       ] })

package/dist/server/index.cjs

@@ -121,7 +121,8 @@ function createNextRoute(config) {
 }
 function cookieGate(name, value = "1") {
   return (req) => {
-    const cookie = req.headers.get("cookie") ?? "";
+    const { headers } = req;
+    const cookie = typeof headers.get === "function" ? headers.get("cookie") ?? "" : headers.cookie ?? "";
     return cookie.split(";").map((c) => c.trim()).some((c) => c === `${name}=${value}`);
   };
 }

package/dist/server/index.d.cts

@@ -70,8 +70,16 @@ type NextRouteConfig = FeedbackServerConfig & {
     authorize?: (req: Request) => boolean | Promise<boolean>;
 };
 declare function createNextRoute(config: NextRouteConfig): (req: Request) => Promise<Response>;
-/** Authorize helper: allow only requests carrying `name=value` in the Cookie header. */
-declare function cookieGate(name: string, value?: string): (req: Request) => boolean;
+/**
+ * Authorize helper: allow only requests carrying `name=value` in the Cookie header.
+ *
+ * Works with BOTH a Web `Request` (Next.js App Router via `createNextRoute`) and a Node
+ * `IncomingMessage` (Vercel / Express via `createNodeHandler`). The two runtimes expose
+ * headers differently — `headers.get("cookie")` vs the plain `headers.cookie` string — so
+ * we feature-detect instead of assuming one shape. (Previously this only handled the Web
+ * `Request`, so the documented `createNodeHandler` usage threw `headers.get is not a function`.)
+ */
+declare function cookieGate(name: string, value?: string): (req: Request | IncomingMessage) => boolean;
 
 type NodeHandlerConfig = FeedbackServerConfig & {
     allowedOrigin?: string;

package/dist/server/index.d.ts

@@ -70,8 +70,16 @@ type NextRouteConfig = FeedbackServerConfig & {
     authorize?: (req: Request) => boolean | Promise<boolean>;
 };
 declare function createNextRoute(config: NextRouteConfig): (req: Request) => Promise<Response>;
-/** Authorize helper: allow only requests carrying `name=value` in the Cookie header. */
-declare function cookieGate(name: string, value?: string): (req: Request) => boolean;
+/**
+ * Authorize helper: allow only requests carrying `name=value` in the Cookie header.
+ *
+ * Works with BOTH a Web `Request` (Next.js App Router via `createNextRoute`) and a Node
+ * `IncomingMessage` (Vercel / Express via `createNodeHandler`). The two runtimes expose
+ * headers differently — `headers.get("cookie")` vs the plain `headers.cookie` string — so
+ * we feature-detect instead of assuming one shape. (Previously this only handled the Web
+ * `Request`, so the documented `createNodeHandler` usage threw `headers.get is not a function`.)
+ */
+declare function cookieGate(name: string, value?: string): (req: Request | IncomingMessage) => boolean;
 
 type NodeHandlerConfig = FeedbackServerConfig & {
     allowedOrigin?: string;

package/dist/server/index.js

@@ -119,7 +119,8 @@ function createNextRoute(config) {
 }
 function cookieGate(name, value = "1") {
   return (req) => {
-    const cookie = req.headers.get("cookie") ?? "";
+    const { headers } = req;
+    const cookie = typeof headers.get === "function" ? headers.get("cookie") ?? "" : headers.cookie ?? "";
     return cookie.split(";").map((c) => c.trim()).some((c) => c === `${name}=${value}`);
   };
 }

package/dist/vite/index.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+var sdk = require('@linear/sdk');
+
+// src/server/core.ts
+var MAX_NOTE = 5e3;
+async function createFeedbackIssue(payload, config) {
+  const { apiKey, teamId } = config;
+  if (!apiKey || !teamId) throw new Error("not_configured");
+  const note = payload?.annotation?.note?.trim();
+  if (!note) throw new Error("note_required");
+  if (note.length > MAX_NOTE) throw new Error("note_too_long");
+  const { annotation, context } = payload;
+  const typeLabel = annotation.typeLabel || capitalize(annotation.type || "Feedback");
+  const linear = new sdk.LinearClient({ apiKey });
+  let assetUrl = null;
+  if (payload.screenshot?.startsWith("data:image/")) {
+    try {
+      assetUrl = await uploadScreenshot(linear, payload.screenshot);
+    } catch (err) {
+      console.error("[feedback] screenshot upload failed", err);
+    }
+  }
+  const description = [
+    note,
+    "",
+    "---",
+    assetUrl ? `![screenshot](${encodeURI(assetUrl)})` : "_No screenshot captured._",
+    "",
+    "**Context**",
+    `- Type: ${typeLabel}`,
+    context?.url ? `- Page: ${context.url}` : null,
+    annotation.name ? `- Reported by: ${annotation.name}` : null,
+    context?.userAgent ? `- User agent: ${context.userAgent}` : null,
+    context?.timestamp ? `- Submitted: ${context.timestamp}` : null
+  ].filter(Boolean).join("\n");
+  const title = `${typeLabel}: ${note.slice(0, 60)}${note.length > 60 ? "\u2026" : ""}`;
+  const labelName = config.labels?.[annotation.type] ?? annotation.type;
+  const labelId = labelName ? await resolveLabelId(linear, labelName, teamId) : null;
+  if (labelName && !labelId) console.warn(`[feedback] label "${labelName}" not found \u2014 creating issue without it`);
+  const create = async (ids) => {
+    const created = await linear.createIssue({ teamId, title, description, labelIds: ids.length ? ids : void 0 });
+    return await created.issue;
+  };
+  const issue = await create(labelId ? [labelId] : []).catch((err) => {
+    if (!labelId) throw err;
+    console.warn("[feedback] create failed with label, retrying without it", err);
+    return create([]);
+  });
+  return { id: issue?.id, identifier: issue?.identifier, url: issue?.url };
+}
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+async function resolveLabelId(linear, name, teamId) {
+  try {
+    const { nodes } = await linear.issueLabels({ filter: { name: { eqIgnoreCase: name } }, first: 50 });
+    if (nodes.length === 0) return null;
+    if (nodes.length === 1) return nodes[0].id;
+    const scored = await Promise.all(
+      nodes.map(async (n) => {
+        try {
+          const team = await n.team;
+          return { id: n.id, teamId: team?.id ?? null };
+        } catch {
+          return { id: n.id, teamId: null };
+        }
+      })
+    );
+    const pick = scored.find((s) => s.teamId === teamId) ?? scored.find((s) => s.teamId === null) ?? scored[0];
+    return pick.id;
+  } catch (err) {
+    console.warn("[feedback] label lookup failed", name, err);
+    return null;
+  }
+}
+async function uploadScreenshot(linear, dataUrl) {
+  const [meta, b64] = dataUrl.split(",");
+  const contentType = /data:(.*?);base64/.exec(meta)?.[1] ?? "image/jpeg";
+  const bytes = Buffer.from(b64, "base64");
+  const filename = `feedback-${Date.now()}.jpg`;
+  const upload = await linear.fileUpload(contentType, filename, bytes.length);
+  if (!upload.success || !upload.uploadFile) throw new Error("failed to request upload URL");
+  const headers = new Headers();
+  headers.set("Content-Type", contentType);
+  headers.set("Cache-Control", "public, max-age=31536000");
+  upload.uploadFile.headers.forEach(({ key, value }) => headers.set(key, value));
+  const put = await fetch(upload.uploadFile.uploadUrl, { method: "PUT", headers, body: new Uint8Array(bytes) });
+  if (!put.ok) throw new Error(`upload PUT failed: ${put.status}`);
+  return upload.uploadFile.assetUrl;
+}
+
+// src/server/node.ts
+var BAD_REQUEST = /* @__PURE__ */ new Set(["note_required", "note_too_long", "bad_type", "bad_json", "not_configured"]);
+function send(res, status, body) {
+  res.statusCode = status;
+  res.setHeader("content-type", "application/json");
+  res.end(JSON.stringify(body));
+}
+async function readJson(req) {
+  const chunks = [];
+  for await (const chunk of req) chunks.push(Buffer.from(chunk));
+  const raw = Buffer.concat(chunks).toString("utf8");
+  if (!raw) throw new Error("bad_json");
+  try {
+    return JSON.parse(raw);
+  } catch {
+    throw new Error("bad_json");
+  }
+}
+function createNodeHandler(config) {
+  return async function handler(req, res) {
+    try {
+      if (config.authorize && !await config.authorize(req)) return send(res, 404, { error: "unauthorized" });
+      if (config.allowedOrigin) {
+        const origin = req.headers.origin ?? "";
+        if (origin && origin !== config.allowedOrigin) return send(res, 403, { error: "forbidden_origin" });
+      }
+      const payload = req.body ?? await readJson(req);
+      const issue = await createFeedbackIssue(payload, config);
+      send(res, 200, { ok: true, ...issue });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      if (BAD_REQUEST.has(message)) return send(res, message === "not_configured" ? 500 : 400, { error: message });
+      console.error("[feedback] issue create failed", err);
+      send(res, 502, { error: "issue_create_failed", message });
+    }
+  };
+}
+
+// src/vite/index.ts
+function linearFeedback(config) {
+  const endpoint = config.endpoint ?? "/api/feedback";
+  const handler = createNodeHandler(config);
+  return {
+    name: "react-linear-feedback",
+    apply: "serve",
+    configureServer(server) {
+      server.middlewares.use(endpoint, (req, res, next) => {
+        if (req.method !== "POST") return next();
+        handler(req, res).catch(next);
+      });
+    }
+  };
+}
+
+exports.linearFeedback = linearFeedback;

package/dist/vite/index.d.cts

@@ -0,0 +1,27 @@
+import { Plugin } from 'vite';
+import { IncomingMessage } from 'node:http';
+
+type FeedbackServerConfig = {
+    /** Linear personal API key (server-side secret). */
+    apiKey: string;
+    /** Target team UUID. */
+    teamId: string;
+    /**
+     * Map a type id (e.g. "bug") to a Linear label NAME. Defaults to the type id itself, so a type
+     * "bug" looks for a label named "bug". Labels are resolved by name at request time.
+     */
+    labels?: Record<string, string>;
+};
+
+type NodeHandlerConfig = FeedbackServerConfig & {
+    allowedOrigin?: string;
+    authorize?: (req: IncomingMessage) => boolean | Promise<boolean>;
+};
+
+type LinearFeedbackViteConfig = NodeHandlerConfig & {
+    /** Path the widget POSTs to; must match `<FeedbackGate endpoint>`. Default `/api/feedback`. */
+    endpoint?: string;
+};
+declare function linearFeedback(config: LinearFeedbackViteConfig): Plugin;
+
+export { type LinearFeedbackViteConfig, linearFeedback };

package/dist/vite/index.d.ts

@@ -0,0 +1,27 @@
+import { Plugin } from 'vite';
+import { IncomingMessage } from 'node:http';
+
+type FeedbackServerConfig = {
+    /** Linear personal API key (server-side secret). */
+    apiKey: string;
+    /** Target team UUID. */
+    teamId: string;
+    /**
+     * Map a type id (e.g. "bug") to a Linear label NAME. Defaults to the type id itself, so a type
+     * "bug" looks for a label named "bug". Labels are resolved by name at request time.
+     */
+    labels?: Record<string, string>;
+};
+
+type NodeHandlerConfig = FeedbackServerConfig & {
+    allowedOrigin?: string;
+    authorize?: (req: IncomingMessage) => boolean | Promise<boolean>;
+};
+
+type LinearFeedbackViteConfig = NodeHandlerConfig & {
+    /** Path the widget POSTs to; must match `<FeedbackGate endpoint>`. Default `/api/feedback`. */
+    endpoint?: string;
+};
+declare function linearFeedback(config: LinearFeedbackViteConfig): Plugin;
+
+export { type LinearFeedbackViteConfig, linearFeedback };

package/dist/vite/index.js

@@ -0,0 +1,145 @@
+import { LinearClient } from '@linear/sdk';
+
+// src/server/core.ts
+var MAX_NOTE = 5e3;
+async function createFeedbackIssue(payload, config) {
+  const { apiKey, teamId } = config;
+  if (!apiKey || !teamId) throw new Error("not_configured");
+  const note = payload?.annotation?.note?.trim();
+  if (!note) throw new Error("note_required");
+  if (note.length > MAX_NOTE) throw new Error("note_too_long");
+  const { annotation, context } = payload;
+  const typeLabel = annotation.typeLabel || capitalize(annotation.type || "Feedback");
+  const linear = new LinearClient({ apiKey });
+  let assetUrl = null;
+  if (payload.screenshot?.startsWith("data:image/")) {
+    try {
+      assetUrl = await uploadScreenshot(linear, payload.screenshot);
+    } catch (err) {
+      console.error("[feedback] screenshot upload failed", err);
+    }
+  }
+  const description = [
+    note,
+    "",
+    "---",
+    assetUrl ? `![screenshot](${encodeURI(assetUrl)})` : "_No screenshot captured._",
+    "",
+    "**Context**",
+    `- Type: ${typeLabel}`,
+    context?.url ? `- Page: ${context.url}` : null,
+    annotation.name ? `- Reported by: ${annotation.name}` : null,
+    context?.userAgent ? `- User agent: ${context.userAgent}` : null,
+    context?.timestamp ? `- Submitted: ${context.timestamp}` : null
+  ].filter(Boolean).join("\n");
+  const title = `${typeLabel}: ${note.slice(0, 60)}${note.length > 60 ? "\u2026" : ""}`;
+  const labelName = config.labels?.[annotation.type] ?? annotation.type;
+  const labelId = labelName ? await resolveLabelId(linear, labelName, teamId) : null;
+  if (labelName && !labelId) console.warn(`[feedback] label "${labelName}" not found \u2014 creating issue without it`);
+  const create = async (ids) => {
+    const created = await linear.createIssue({ teamId, title, description, labelIds: ids.length ? ids : void 0 });
+    return await created.issue;
+  };
+  const issue = await create(labelId ? [labelId] : []).catch((err) => {
+    if (!labelId) throw err;
+    console.warn("[feedback] create failed with label, retrying without it", err);
+    return create([]);
+  });
+  return { id: issue?.id, identifier: issue?.identifier, url: issue?.url };
+}
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+async function resolveLabelId(linear, name, teamId) {
+  try {
+    const { nodes } = await linear.issueLabels({ filter: { name: { eqIgnoreCase: name } }, first: 50 });
+    if (nodes.length === 0) return null;
+    if (nodes.length === 1) return nodes[0].id;
+    const scored = await Promise.all(
+      nodes.map(async (n) => {
+        try {
+          const team = await n.team;
+          return { id: n.id, teamId: team?.id ?? null };
+        } catch {
+          return { id: n.id, teamId: null };
+        }
+      })
+    );
+    const pick = scored.find((s) => s.teamId === teamId) ?? scored.find((s) => s.teamId === null) ?? scored[0];
+    return pick.id;
+  } catch (err) {
+    console.warn("[feedback] label lookup failed", name, err);
+    return null;
+  }
+}
+async function uploadScreenshot(linear, dataUrl) {
+  const [meta, b64] = dataUrl.split(",");
+  const contentType = /data:(.*?);base64/.exec(meta)?.[1] ?? "image/jpeg";
+  const bytes = Buffer.from(b64, "base64");
+  const filename = `feedback-${Date.now()}.jpg`;
+  const upload = await linear.fileUpload(contentType, filename, bytes.length);
+  if (!upload.success || !upload.uploadFile) throw new Error("failed to request upload URL");
+  const headers = new Headers();
+  headers.set("Content-Type", contentType);
+  headers.set("Cache-Control", "public, max-age=31536000");
+  upload.uploadFile.headers.forEach(({ key, value }) => headers.set(key, value));
+  const put = await fetch(upload.uploadFile.uploadUrl, { method: "PUT", headers, body: new Uint8Array(bytes) });
+  if (!put.ok) throw new Error(`upload PUT failed: ${put.status}`);
+  return upload.uploadFile.assetUrl;
+}
+
+// src/server/node.ts
+var BAD_REQUEST = /* @__PURE__ */ new Set(["note_required", "note_too_long", "bad_type", "bad_json", "not_configured"]);
+function send(res, status, body) {
+  res.statusCode = status;
+  res.setHeader("content-type", "application/json");
+  res.end(JSON.stringify(body));
+}
+async function readJson(req) {
+  const chunks = [];
+  for await (const chunk of req) chunks.push(Buffer.from(chunk));
+  const raw = Buffer.concat(chunks).toString("utf8");
+  if (!raw) throw new Error("bad_json");
+  try {
+    return JSON.parse(raw);
+  } catch {
+    throw new Error("bad_json");
+  }
+}
+function createNodeHandler(config) {
+  return async function handler(req, res) {
+    try {
+      if (config.authorize && !await config.authorize(req)) return send(res, 404, { error: "unauthorized" });
+      if (config.allowedOrigin) {
+        const origin = req.headers.origin ?? "";
+        if (origin && origin !== config.allowedOrigin) return send(res, 403, { error: "forbidden_origin" });
+      }
+      const payload = req.body ?? await readJson(req);
+      const issue = await createFeedbackIssue(payload, config);
+      send(res, 200, { ok: true, ...issue });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      if (BAD_REQUEST.has(message)) return send(res, message === "not_configured" ? 500 : 400, { error: message });
+      console.error("[feedback] issue create failed", err);
+      send(res, 502, { error: "issue_create_failed", message });
+    }
+  };
+}
+
+// src/vite/index.ts
+function linearFeedback(config) {
+  const endpoint = config.endpoint ?? "/api/feedback";
+  const handler = createNodeHandler(config);
+  return {
+    name: "react-linear-feedback",
+    apply: "serve",
+    configureServer(server) {
+      server.middlewares.use(endpoint, (req, res, next) => {
+        if (req.method !== "POST") return next();
+        handler(req, res).catch(next);
+      });
+    }
+  };
+}
+
+export { linearFeedback };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-linear-feedback",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Drop-in React feedback widget: draw a box, write a note, and it captures a screenshot and opens a Linear issue. Framework-agnostic, self-contained styles, zero design-system dependencies.",
   "license": "MIT",
   "author": "Oliver Odgaard",
@@ -40,6 +40,11 @@
       "types": "./dist/server/index.d.ts",
       "import": "./dist/server/index.js",
       "require": "./dist/server/index.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js",
+      "require": "./dist/vite/index.cjs"
     }
   },
   "scripts": {
@@ -48,29 +53,30 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@linear/sdk": "^86.0.0",
     "modern-screenshot": "^4.7.0"
   },
   "peerDependencies": {
-    "@linear/sdk": ">=40",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "vite": ">=5"
   },
   "peerDependenciesMeta": {
-    "@linear/sdk": {
+    "react-dom": {
       "optional": true
     },
-    "react-dom": {
+    "vite": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@linear/sdk": "^86.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsup": "^8.5.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
   }
 }